<template>
  <!-- 操作权限 -->
  <div class="o-permissions">
    <div class="e-item">
      <span class="title">操作权限</span>
      <!-- 一级 -->
      <ul class="one-menu menu">
        <li v-for="(val, index) in permissionList" :key='index'>
          <w-checkbox v-model="val.isChecked" :label='val.oneMenuId' @on-change="changeCheckbox(val, 'one')" :disabled="isEdit">
            <span>{{val.oneMenu}}</span>
          </w-checkbox>
          <span class="ico-drop" @click="changeShow($event, val)"></span>

          <!-- 二级 -->
          <ul class="two-menu menu" v-if="val.isShowListItem">
            <li  v-for="(v, i) in val.twoList" :key='i' v-if="val.twoList && val.twoList.length > 0">
              <w-checkbox v-model="v.isChecked" :label='v.twoMenuId' @on-change="changeCheckbox(val, 'two', v.twoMenuId)" :disabled="isEdit">
                <span>{{v.twoMenuName}}</span>
              </w-checkbox>
              <span class="ico-drop" v-if="v.threeList && v.threeList.length > 0" @click="changeShow($event, v)"></span>

              <!-- 三级 -->
              <ul class="three-menu menu" v-if="v.threeList && v.threeList.length > 0 && v.isShowListItem">
                <li v-for='(value, three) in v.threeList' :key="three" >
                  <span>
                    <w-checkbox v-model="value.isChecked" :label='value.threeMenuId' @on-change="changeCheckbox(val, 'three')" :disabled="isEdit">
                      <span>{{value.threeMenuName}}</span>
                    </w-checkbox>
                  </span>

                  <span>
                    <w-checkbox v-model="value.add" :label='`add${value.threeMenuId}`' @on-change="changeCheckbox(val, 'four', 'add')" :disabled="isEdit">
                      <span>增</span>
                    </w-checkbox>
                  </span>
                  <span>
                    <w-checkbox v-model="value.delete" :label='`delete${value.threeMenuId}`' @on-change="changeCheckbox(val, 'four')" :disabled="isEdit">
                      <span>删</span>
                    </w-checkbox>
                  </span>
                  <span>
                    <w-checkbox v-model="value.update" :label='`update${value.threeMenuId}`' @on-change="changeCheckbox(val, 'four', 'update')" :disabled="isEdit">
                      <span>改</span>
                    </w-checkbox>
                  </span>
                  <span>
                    <w-checkbox v-model="value.select" :label='`select${value.threeMenuId}`' @on-change="changeCheckbox(val, 'four', 'select')" :disabled="isEdit">
                      <span>查</span>
                    </w-checkbox>
                  </span>
                  <span v-if="value.check">
                    <w-checkbox v-model="value.audit" :label='`audit${value.threeMenuId}`' @on-change="changeCheckbox(val, 'four', 'audit')" :disabled="isEdit">
                      <span>审批</span>
                    </w-checkbox>
                  </span>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    permissionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    defaultChecked: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      checkedPermission: [] // 选中的权限列表
    }
  },
  watch: {
    defaultChecked: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          for (let i = 0; i < newValue.length; i++) {
            if (oldValue[i] != newValue[i]) {
              // this.$emit('get-checkedPermission', this.defaultChecked)
              this.changeRole()
            }
          }
        } else {
          this.clearList()
        }
      },
      deep: true
    }
  },
  methods: {
    // 是否显示下级权限
    changeShow(e, data) {
      data.isShowListItem = !data.isShowListItem
      if (!data.isShowListItem) {
        e.target.classList.add('actived')
      } else {
        e.target.classList.remove('actived')
      }
    },
    // 循环权限列表，选中 默认选中 的基本权限
    changeRole() {
      this.clearList()
      // this.checkedPermission = []
      this.permissionList.forEach(v => {
        // 二级选中的个数
        let twoCount = 0
        v.twoList.forEach(val => {
          if (val.threeList && val.threeList.length) {
            // 三级选中的个数
            let threeCount = 0
            val.threeList.forEach(value => {
              this.defaultChecked.forEach(item => {
                // threeMenuCode 匹配权限
                if (value.threeMenuCode == item.threeMenuCode) {
                  let threePermission = ''
                  item.permissions.forEach(per => {
                    threePermission += ',' + per
                    this.$set(value, per, true)
                  })
                  if (value.check) {
                    if (value.add && value.update && value.delete && value.select && value.audit) {
                      value.isChecked = true
                      threeCount++
                    } else {
                      value.isChecked = false
                      threeCount--
                    }
                  } else {
                    if (value.add && value.update && value.delete && value.select) {
                      value.isChecked = true
                      threeCount++
                    } else {
                      value.isChecked = false
                      threeCount--
                    }
                  }
                  if (threePermission.length > 1) {
                    this.checkedPermission.push([String(v.oneMenuId), String(val.twoMenuId), String(value.threeMenuId), threePermission.substring(1)])
                  }
                }
              })
            })
            // 判断当前 二级下的 三级 是否全部选中
            if (threeCount == val.threeList.length) {
              val.isChecked = true
              twoCount++
            }
          }
        })
        // 判断当前 一级下的 二级 是否全部选中
        if (twoCount == v.twoList.length) {
          v.isChecked = true
        }
      })
      this.$emit('get-checkedPermission', this.checkedPermission)
    },
    // 清空列表
    clearList() {
      this.checkedPermission = []
      this.permissionList.forEach(v => {
        v.isChecked = false
        v.twoList.forEach(val => {
          if (val.threeList && val.threeList.length) {
            val.isChecked = false
            val.threeList.forEach(value => {
              this.$set(value, 'isChecked', false)
              this.$set(value, 'select', false)
              this.$set(value, 'add', false)
              this.$set(value, 'update', false)
              this.$set(value, 'delete', false)
              if (value.check) {
                this.$set(value, 'audit', false)
              }
            })
          }
        })
      })
      this.$emit('get-checkedPermission', this.checkedPermission)
    },
    // 权限 复选框 的点击事件
    changeCheckbox(oneList, type, params) {
      this.checkedPermission = []
      // 点击 一级权限，子级全部选中，反之亦然
      if (type == 'one') {
        oneList.twoList.forEach(val => {
          val.isChecked = oneList.isChecked
          val.threeList.forEach(value => {
            value.isChecked = oneList.isChecked
            value.add = oneList.isChecked
            value.update = oneList.isChecked
            value.delete = oneList.isChecked
            value.select = oneList.isChecked
            if (value.check) {
              value.audit = oneList.isChecked
            }
          })
        })
      }
      // 点击 二级权限
      if (type == 'two') {
        oneList.twoList.forEach(val => {
          // 如果二级权限选中 三级全部是选中状态，反之亦然
          if (params == val.twoMenuId) { // 判断是否 是 当前选中的二级权限
            val.threeList.forEach(value => {
              value.isChecked = val.isChecked
              value.add = val.isChecked
              value.update = val.isChecked
              value.delete = val.isChecked
              value.select = val.isChecked
              if (value.check) {
                value.audit = val.isChecked
              }
            })
          }
        })
      }
      // 点击 三级权限
      if (type == 'three') {
        oneList.twoList.forEach(val => {
          val.threeList.forEach(value => {
            // 三级权限选中
            value.select = value.add = value.update = value.delete = value.isChecked
            if (value.check) {
              value.audit = value.isChecked
            }
          })
        })
      }
      // 点击 增删改查
      if (type == 'four') {
        oneList.twoList.forEach(val => {
          val.threeList.forEach(value => {
            /** 
            * 如果 去掉 查，则对应的三级权限 取消选中
            */
            if (params == 'select') {
              if (!value.select) {
                value.isChecked = false
                value.add = false
                value.update = false
                value.delete = false
                if (value.check) {
                  value.audit = false
                }
              }
            } else if (params == 'add') {
              if (value.add) {
                value.update = true
                value.select = true
              } else {
                value.update = false
              }
            } else if (params == 'update') {
              if (value.update) {
                value.add = true
                value.select = true
              } else {
                value.add = false
              }
            } else if (params == 'audit') {
              if (value.audit) {
                value.select = true
              }
            } else {
              if (value.delete) {
                value.select = true
              }
            }
          })
        })
      }
      // 循环权限数组，获取选中的权限集合
      this.permissionList.forEach(v => {
        // 二级选中的个数
        let two = 0 
        v.twoList.forEach(val => {
          if (val.threeList && val.threeList.length) {
            // 三级选中的个数
            let three = 0
            val.threeList.forEach(value => {
              // 三级权限选中
              let threePermission = ''
              if (value.select) {
                threePermission += ',select'
              }
              if (value.add) {
                threePermission += ',add'
              }
              if (value.update) {
                threePermission += ',update'
              }
              if (value.delete) {
                threePermission += ',delete'
              }
              if (value.audit) {
                threePermission += ',audit'
              }
              if (value.check) {
                if (value.add && value.update && value.delete && value.select && value.audit) {
                  value.isChecked = true
                  three++
                } else {
                  value.isChecked = false
                  three--
                }
              } else {
                if (value.add && value.update && value.delete && value.select) {
                  value.isChecked = true
                  three++
                } else {
                  value.isChecked = false
                  three--
                }
              }
              if (threePermission.length > 1) {
                this.checkedPermission.push([String(v.oneMenuId), String(val.twoMenuId), String(value.threeMenuId), threePermission.substring(1)])
              }
            })
            // 判断当前 二级下的 三级 是否全部选中
            if (three == val.threeList.length) {
              val.isChecked = true
              two++
            } else {
              val.isChecked = false
              two--
            }
          }
        })
        // 判断当前 一级下 的 二级 是否全部选中
        if (two == v.twoList.length) {
          v.isChecked = true
        } else {
          v.isChecked = false
        }
      })
      this.$emit('get-checkedPermission', this.checkedPermission)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../scss/_var.scss';

.e-item {
  display: inline-block;
  margin-top: 20px;
  position: relative;
  .title {
    width: 56px;
    display: inline-block;
    margin-left: 20px;
    font-size: 12px;
  }
  .dis-block {
    display: inline-block;
    width: 170px;
    vertical-align: middle;
  }
}
.menu {
  margin: 0 24px;
  li {
    margin-top: 24px;
    position: relative;
    margin-bottom: 24px;
  }
  span {
    font-size: 13px;
  }
}
.one-menu {
  position: relative;
  top: -42px;
  left: 56px;
  width: 1110px;
  margin-right: 0;
}
.three-menu li{
  display: inline-block;
  margin-right: 40px;
  margin-top: 0;
  margin-bottom: 0;
  &:last-child {
    margin-right: 0;
  }
  & > span {
    display: inline-block;
    margin-top: 24px;
  }
}
.ico-drop {
    position: absolute;
    top: 8px;
    margin-left: 5px;
    z-index: 2;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: #444;
    transition: all .2s;
    &.actived {
    transform: rotate(180deg) translateY(8px);
    }
}
.m-checkbox .check-btn {
      width: 16px !important;
      height: 16px !important;
    }
    .m-checkbox input:checked + .check-btn::before {
      top: 9px !important;
      left: 0 !important;
    }
    .m-checkbox input:checked + .check-btn::after {
      top: 5px !important;
      left: 3px !important;
    }
</style>


